Add Google Web Fonts In WordPress Theme

The Best Way To Add Google Web Fonts In WordPress Theme

After going through the website with the best font style, you may think about changing the font of your current theme.

Every WordPress theme has its own font depending on the developer’s choice.

If you want to change the typography of your theme then you should know how to add Google web fonts in WordPress theme properly.

There are different ways but in this tutorial, you will have the easiest and the best method which won’t affect the page loading time of your website.

Some methods lower down the speed due to the file upload.

Choose the Google Fonts From Their Library

Go to Google Fonts and you will see many fonts with the different font families.

Google provides you many options to filter the fonts from a particular family and more. You can even select the type of the font-weight.

After going through all the fonts, click on the name you want to use on your WordPress website.

You will notice all the detail of that font. Google will show you it’s appearance in every possible use. You can even see the preview by changing the size of the font.

After finalizing, you have to click on the “Select This Font” button shown in front of the font name.

NOTE:- If you want to download multiple fonts, you can select many fonts.

You will notice a bar in the lower part of the screen.

Just click to that and all the fonts with the proper usage guide will be showing.

You have to copy the link tag provided by Google and past it in the header.php of your theme.

Let me show you an example of the code.

<link href=”//fonts.googleapis.com/css?family=Overpass” rel=”stylesheet”>

If you don’t want to edit the theme file then use any plugin which can directly add this link tag in the <head> tag.

To use it in your WordPress theme, you can add it in the style.css file for anything.

If you to change the font style of the heading then target it.

Let me show you an example.

h1 { font-family: ‘Overpass’, sans-serif; }

And you will notice a beautiful font for all the h1 tags for your headings.

When you add multiple fonts then the link tags would be more and the font value would be different.

Just add those tags in the header file of your theme like you did for one font.

Are You Ready To Give A New Look To Your Website

With a good font, you can change the whole design of your website.

If you’re a WordPress theme developer then it would be more helpful for you. Just use the different fonts for your themes.

Provide the best design to your clients.

Can you now add Google web fonts in WordPress theme? If you have any trouble, feel free to contact.

There are many important factors to consider when designing a website and the font style plays an important role.

You can also connect with us on Twitter, LinkedIn, and Facebook.

by Ravi Chahar

A WordPress Professional and the LinkedIn Influencer. A coder by passion and a blogger by choice. WordPress theme development is his forte. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, design issues and what not.


Get Free Updates Into Your Inbox

Learn Everything Just Like I Did

SUBSCRIBE



2 comments

  1. Ravi,

    That is a cool way to change my website. I shall definitely give it a try to install the google web fonts now. I do think it should be straight forward after reading your article.

    1. Hey Praveen,

      The typography of a website can give a better design. You can edit the theme files within a few minutes. Just use the code provided by Google fonts.

      Thanks for stopping by.

      Have a nice day.

      ~Ravi

Leave a Reply

Your email address will not be published. Required fields are marked *